<template>
  <div
    class="flex items-center cursor-pointer translate-x-1.5"
    @click="handleClick"
  >
    <span class="text-[#868D9D] text-[12px]">{{ text }}</span>
    <basic-icon name="chevron-right" color="#868D9D" size="18px"></basic-icon>
  </div>
</template>

<script setup lang="ts">
interface IEmit {
  (event: 'more'): void
}

interface IProps {
  text?: string
  route?: string
}

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  text: useI18nContent('common.layout.more')
})

const router = useRouter()

function handleClick() {
  if (props.route) {
    router.push({ name: props.route })
    return
  }
  emit('more')
}
</script>
